﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MapView.aspx.cs" Inherits="View_MapView" %>

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html {
            height: 100%;
        }

        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map-canvas {
            height: 100%;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyA0iEvKEBmx4xWsYsouzTg8dYBMvd8leCc&sensor=false"></script>
    <script type="text/javascript">
        var map;
        var infowindow = new google.maps.InfoWindow();
        var geocoder;
        var temp;
        function choicePointAndCloseMap(lat, lon) {
            window.opener.refresh_data(temp.split(',').join('-'), lat, lon);
            this.close();
        }

        function initialize() {
            geocoder = new google.maps.Geocoder();
            var pyrmont = new google.maps.LatLng(21.00792, 105.844688);

            var mapOptions = {
                center: new google.maps.LatLng(21.00792, 105.844688),
                zoom: 12,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: true,
                mapTypeControlOptions:
                {
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                    poistion: google.maps.ControlPosition.TOP_RIGHT,
                    mapTypeIds: [google.maps.MapTypeId.ROADMAP,
                      google.maps.MapTypeId.TERRAIN,
                      google.maps.MapTypeId.HYBRID,
                      google.maps.MapTypeId.SATELLITE]
                },
                navigationControl: true,
                navigationControlOptions:
                {
                    style: google.maps.NavigationControlStyle.ZOOM_PAN
                },
                scaleControl: true,
                disableDoubleClickZoom: true,
                draggable: true,
                streetViewControl: true,
                draggableCursor: 'crosshair'
            };

            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            google.maps.event.addListener(map, 'click', function (event) {
                codeLatLng(event.latLng.lat(), event.latLng.lng());
            });
        }

        function codeLatLng(latitude, logitude) {
            var latlng = new google.maps.LatLng(latitude, logitude);
            geocoder.geocode({ 'latLng': latlng }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results != null) {
                        if (results.length > 0) {
                            var info = results[0];
                            console.log(results);
                            if (checkBusStation(info.types)) {
                                marker = new google.maps.Marker({
                                    position: latlng,
                                    map: map
                                });
                                temp = getNameBusStation(info.address_components);
                                var link = "<a " + "onclick=choicePointAndCloseMap(" + latitude + "," + logitude + ")" + " href='javascript:;'>" + temp + "</a>";
                                var htmlResult = "<p>" + link + "</p>";
                                infowindow.setContent(htmlResult);
                                infowindow.open(map, marker);
                            } else {
                                alert("Địa điểm chọn không phải điểm đỗ xe bus!");
                            }
                        }
                    }
                } else {
                    alert("Truy vấn không thành công: " + status);
                }
            });
        }

        function checkBusStation(type) {
            var check = false;
            for (var i = 0; i < type.length; i++) {
                if (type[i] == "bus_station") {
                    check = true;
                    break;
                }
            }
            return check;
        }

        function checkBusStationChild(type) {
            var check = false;
            for (var i = 0; i < type.length; i++) {
                if (type[i] == "bus_station" || type[i] == "country") {
                    check = true;
                    break;
                }
            }
            return check;
        }

        function getNameBusStation(arayAddress) {
            var name = "";
            for (var j = 0; j < arayAddress.length; j++) {
                var temp = arayAddress[j];
                if (checkBusStationChild(temp.types)) {
                    if (temp.short_name.indexOf(",") > 0) {
                    } else {
                        name += temp.short_name + ", ";
                    }
                } else {
                    name += temp.short_name + ", ";
                }
            }
            var index = name.indexOf("VN");
            if (index > 2) {
                name = name.slice(0, index - 2);
            }
            return name;
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div id="map-canvas" />
</body>
</html>

